<!-- wrapping all content of the page inside a div is just a convention, not required by framework though -->
<div>
	<!-- top bar -->
	<div class="navbar">
	  <div class="navbar-inner">
		<div class="container-fluid">
		  <a class="brand">Pages - Navigatable user interface.</a>
		  <div class="pull-right">
			<a class="navbar-text noline" href="..\..\conceptual\pages" fluid-noIntercept target="_blank" title="Open source folder"><i class="icon-folder-open"></i> Source</a> 
			<a class="navbar-text noline" href="http://docs.fluidjs.vikasburman.com/2013/01/pages.html" fluid-noIntercept target="_blank" title="Open example page"><i class="icon-file"></i> Docs</a>
		  </div>
		</div>
	  </div>
	</div>
	<!-- -->

	<div class="container-fluid">
		<div class="row-fluid">

			<!-- side bar -->
			<div class="span3"><div class="well sidebar-nav">
				<!-- sections -->
				<div class="accordion" id="accordion">
				  <!-- showcase -->
				  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec1" fluid-noIntercept>
					<i class="icon-comment"></i> Showcase
				  </a></div><div id="sec1" class="accordion-body collapse in"><div class="accordion-inner">
					<p><i class="icon-cog"></i> This shows how pages can navigated to using browser back/forward.</p>
				  </div></div></div>
				  <!-- -->
				  <!-- observations -->
				  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec2" fluid-noIntercept>
					<i class="icon-eye-open"></i> Observations
				  </a></div><div id="sec2" class="accordion-body collapse"><div class="accordion-inner">
					<p><i class="icon-cog"></i> Note the address bar for changed hashtag "#pages/myPage2.page". This shows that you are navigated to this new page.</p>
				  </div></div></div>
				  <!-- -->
				  <!-- Activities -->
				  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec3" fluid-noIntercept>
					<i class="icon-hand-right"></i> Activities
				  </a></div><div id="sec3" class="accordion-body collapse"><div class="accordion-inner">
					<p><i class="icon-cog"></i> Click on hyperlinks below to go back or navigate to a different page.</p>
					<a href="fluid://nav/history/back.func">Go Back</a><br />
					<a href="fluid://pages/myPage3.page$arg1=1111&arg2=1234">Navigate to myPage3</a></p>
					<p><i class="icon-cog"></i> Do note the url of first hyperlink above, this shows how a plugin function can be called via fluid:// protocol. The url
					is equivalent to calling it via JavaScript as: <span class='object'>$f.nav.history.back();</span>.</p>
					<p><i class="icon-cog"></i> Refresh the page via <span class='object'>F5</span> and you will see parameters are still there
					because these are part of url itself.</p>
					<p><i class="icon-cog"></i> Click on button below to call page function. This shows that current page can be accessed via <span class='object'>$f.page</span>.<br />
					<input class="btn btn-primary" type="submit" value="Call page function" onclick="javascript:$f.page.pageFunc();" /></p>
				  </div></div></div>
				  <!-- -->
				  <!-- Takeaways -->
				  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec4" fluid-noIntercept>
					<i class="icon-shopping-cart"></i> Takeaways
				  </a></div><div id="sec4" class="accordion-body collapse"><div class="accordion-inner">
					<p><i class="icon-cog"></i> Pages can be navigated to either programatically or by href using fluid:// protocol.</p>
					<p><i class="icon-cog"></i> Each page gets its own unique url using hashtag and therefore can be copy-pasted in another browser (although might 
					not be very useful as it will not get to open in same session).</p>
					<p><i class="icon-cog"></i> Arguments can be passed while navigating to a page.</p>
					<p><i class="icon-cog"></i> Browser back/forward buttons are completely integrated with page navigation.</p>
					<p><i class="icon-cog"></i> Even plugin functions can be called using fluid:// protocol.</p>
				  </div></div></div>
				  <!-- -->
				</div>
				<!-- -->
			</div></div>
			<!-- -->
			
			<!-- right half where the action is -->
			<div class="span9"><div class="row-fluid">
				
				<!-- tabs -->
				<ul class="nav nav-tabs">
					<li id="t1" class="active"><a href="#" onclick="javascript: return showTab('t1', 'lifecycle');">Page Parameters</a></li>
				</ul>
				<!-- -->

				<!-- page title -->
				<div id="title">
				</div>						
				<!-- -->
				
				<!-- parameters -->
				<div id="params">
				</div>						
				<!-- -->
			</div></div>
			<!-- -->
			
		</div>	
	</div>
	
</div>